<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>waitum的博客</title>
</head>
<body>

	<a href="#butten">BUTTEN</a>
	
	<!-- 1.标题 -->
	<h1>苍老师</h1>
	<h1>苍老师2</h1>
	<h2>范传奇</h2>
	<h3>王克晶</h3>
	<!-- 2.段落 -->
		<p>范传奇暗恋王克晶</p>
		<p><a href="#cang">苍老师</a>吃醋</p>
	<!-- 3.列表-->
	<!-- 3.1 有序列表 -->	
	<ol>
		<li>北京</li>
		<li>上海</li>
		<li>广州</li>
	</ol>
	<!-- 3.2 无序列表  -->
	<ul>
		<li>黑龙江</li>
		<li>江苏</li>
		<li>福建</li>
	</ul>	
	<!-- 3.3 嵌套列表 -->
	<ol>
		<li>
		  黑龙江
		  <ul>
		  	<li>哈尔滨</li>
		  	<li>佳木斯</li>
		  	<li>牡丹江</li>
		  </ul>
		</li>
		<li>
		  河北
		  <ul>
		    <li>石家庄</li>
		    <li>廊坊</li>
		    <li>雄安</li>
		  </ul>
		</li>
	</ol>
	
	<!-- 4.行内元素 -->
	<p>
		北京市<i>海淀</i>区北<b>三环</B>西路
		甲<u>18</u>号<span style="color:red;"><u>中
		鼎大厦</u></span>B座7层
	</p>
	
	<!-- 5.空格折叠原则 -->
	<p> 
		那是一个&nbsp;&nbsp;&nbsp;秋天，<br>
		看着传奇&nbsp;&nbsp;&nbsp;跑偏，<br>
		奔着克晶&nbsp;&nbsp;&nbsp;而去，<br>
		误入老苍&nbsp;&nbsp;&nbsp;心间。<br>	
	
	</p>
	<!-- 6.图片 -->
	<!-- 6.1:绝对路径
			缺点：一旦软件上线时，
			用户要求将其存放到其他目录下，
			那么所有路径就都错了。 -->
	<!-- 6.2:相对路径
			只需要写出图片和当前网页的相对位置即可 -->	
	<p>
		<!--图片和网页平级  -->
		<img src="01.jpg"/>
		<!-- 图片在网页下级 -->
		<img src="i/02.jpg"/>
		<!-- 图片在网页的上级 -->
		<img src="../03.jpg"/>
		<!-- 通常情况下使用 -->
		<img src="../images/04.jpg"/>
		<img src="../images/06.jpg"/>
	</p>		
			
	<!-- 7.超链接 -->
	<!-- 7.1、普通的用法 -->
	<p>
		<a href="http://www.tmooc.cn">达内-TMOOC</a>
		<a href="http://doc.tedu.cn" target="_blank">API文档</a>
	</p>
	<!-- 7.2、链接到锚点 -->	
	<p>
		<a name="cang">苍老师</a>是个好老师，哈哈哈！身兼数职啊	
	</p>
	<!-- 7.3、特殊的锚点（特殊用法）
			网页的顶部默认是锚点，没有名字 -->
	<p>
		<a href="#">Top</a>
	</p>
	<!-- 8.表格 -->
	<!-- 8.1 普通的表格 -->
	<table border="1" cellspacing=0 width="20%">
		<tr>
			<td>苍老师</td>		
			<td>范传奇</td>		
		</tr>
		<tr>
			<td>王克晶</td>		
			<td>陈祖红</td>		
		</tr>
	</table>
	
	<!-- 8.2 跨行跨列 -->
	<table border="10" cellspacing=0 width="20%">
		<tr>
			<td colspan="2">苍老师</td>		
			<!-- <td>范传奇</td>	 -->	
			<td>陈祖红</td>	
		</tr>
		<tr>
			<td>王克晶</td>		
			<td>陈祖红</td>	
			<td>陈祖红</td>		
		</tr>
	</table>
	<table border="10" cellspacing=0 width="20%">
		<tr>
			<td rowspan="2">苍老师</td>		
			<td>范传奇</td>		
		</tr>
		<tr>
			<!-- <td>王克晶</td>	 -->	
			<td>陈祖红</td>		
		</tr>
		<tr>
			<td>王克晶</td>		
			<td>陈祖红</td>		
		</tr>
	</table>
	
	<!-- 8.3 行分组 -->
	<table border="1" cellspacing="0" width="50%" >
		<thead>
			<tr>
				<td>编号</td>
				<td>名称</td>
				<td>金额</td>
			</tr>
		</thead>
		<tbody style="color:red;">
			<tr>
				<td>001</td>
				<td>鼠标</td>
				<td>50</td>
			</tr>
			<tr>
				<td>002</td>
				<td>键盘</td>
				<td>100</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="2">合计</td>
				<td>150</td>
			</tr>			
		</tfoot>
	</table>
	<a name="butten"></a>
	
</body>
</html>